<template>
	<view class="container">
		<!-- 轮播图 -->
		<view class="swiperbox">
			<swiper circular indicator-dots autoplay class="swiper">
				<swiper-item class="swiperitem">
					<image
						src="https://lnnu-tuchuang.oss-cn-guangzhou.aliyuncs.com/farm/2023-03-19/f799c110-1412-4310-8b11-eeff1e2b7e7a8588659490408123827.jpg">
					</image>
				</swiper-item>
				<swiper-item class="swiperitem">
					<image
						src="https://lnnu-tuchuang.oss-cn-guangzhou.aliyuncs.com/farm/2023-03-19/85108814-eef5-42e5-9879-f9035306e16b8180200727266283091.jpg">
					</image>
				</swiper-item>
				<swiper-item class="swiperitem">
					<image
						src="https://lnnu-tuchuang.oss-cn-guangzhou.aliyuncs.com/farm/2023-03-19/2b3396b4-b941-44c4-bab5-cf73db0ec714785940085884926055.jpg">
					</image>
				</swiper-item>
			</swiper>
		</view>

		<view class="detail" 
			v-for="(item,index) in list" 
			:key="index" 
			@click="getDetail(item)">
			<image src="../../static/yq.png"></image>
			<view class="content">
				<view class="title">
					{{item.title}}
				</view>
				<view class="span">
					示例：{{item.brief}}
				</view>
				<view class="import">
					导入
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTemplateList
	} from '../../request/api.js'
	export default {
		data() {
			return {
				list: [{
						id: '1',
						title: '《垫底辣妹》观后感',
					},
					{
						id: '1',
						title: '《垫底辣妹》观后感',
					},
					{
						id: '1',
						title: '《垫底辣妹》观后感',
					}
				],
				demo: []
			}
		},
		onLoad() {
			let demo = uni.getStorageSync('demo');
			this.demo = demo

			uni.request({
				url: 'http://aicreation.lipux.cn/getTemplateList',
				data: this.userInfo,
				method: 'POST',
				success: (res) => {
					console.log(res);
					if (res.data.code === 200) {
						console.log(res);
						this.list = res.data.data
					} 
				},
				fail: (err) => {
					console.log(err)
				}
			})

		},
		methods: {
			backPageRefresh(page) {
				let pages = getCurrentPages(); // 当前页面        
				let beforePage = pages[pages.length - 2]; // 上一页        
				uni.navigateBack({
					success: function() {
						beforePage.$vm.reFresh();
						console.log("返回成功!");
					}
				})
			},
			getDetail(item) {
				console.log(item, this.demo);
				for (var i = 0; i < this.demo.length; i++) {
					if (this.demo[i].id == item.id) {
						// 已有该id，返回true
						uni.showToast({
							"title": "用户已经下载该模板",
							"icon": 'none'
						})
						return true;
					}
				}
				// 没有该id，添加新对象到demo中，并返回false
				this.demo.push({
					id: item.id,
					title: item.title
				});
				uni.setStorageSync('demo', this.demo);

				setTimeout(() => {
					uni.showToast({
						"title": "下载完成",
						"icon": 'none'
					})
					// uni.switchTab({
					//    url: '/pages/index/index'
					// });
					//H5刷新无效，仅限微信小程序
					uni.switchTab({
						url: "/pages/index/index",
						success(res) {
							console.log('跳转成功')
							let data = {
								reload: 1
							}
							let page = getCurrentPages().pop();
							//data可不传值
							page.onLoad(data);
						}
					})


				}, 500)

			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		padding-top: 50rpx;
		padding-bottom: 120rpx;
	}




	/* 头部 */

	.header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 145rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
		padding-bottom: 15rpx;
	}

	.header .header-title {
		color: rgba(0, 0, 0, 1);
		font-size: 40rpx;
		font-weight: 700;
	}

	.header .oneWorld {
		font-size: 30rpx;
		color: rgba(0, 0, 0, 0.45);
		margin-top: 7rpx;
	}

	.swiperbox {
		border-radius: 10px;
	}

	.swiper {
		width: 95vw;
		height: 180px;
		margin: 0 0px 0 2.5vw;
		border: 0;
		border-radius: 10px;
	}

	.swiperitem image {
		width: 100%;
		height: 100%;
		margin: 0 0px 0 0px;
		border-radius: 5px;
	}

	.detail {
		display: flex;
		border: 1px solid #e4e4e4;
		margin: 10px;
		border-radius: 5px;
		padding: 15px 10px;
		image{
			width: 30px;
			height: 35px;
			// margin: 0 15px;
		}
		
		.content{
			flex: 1;
			margin-left: 10px;
		}

		.title {
			font-size: 17px;
			font-weight: 600;
		}

		.span {
			// display: inline-block;
			background-color: #2a82e421;
			padding: 15px;
			margin: 10px 10px 10px 0;
			border-radius: 5px;
			font-size: 15px;	
			color: #2a82e4;
		}
		.import{
			// display: inline-block;
			border-radius: 5px;
			padding: 10px;
			font-size: 15px;
			background-color: #eee;
			text-align: center;
		}
	}
</style>
